/* Copyright (c) 2024 Huawei Technologies Co., Ltd.
openFuyao is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
         http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details. */
import { Modal, Button, Input, Radio } from 'antd';
import { Fragment, useEffect, useState } from 'openinula';
import '@/styles/components/createMonitorComponentModal.less';
import areaSimple from '@/assets/images/chart/area.png';
import barSimple from '@/assets/images/chart/bar.png';
import lineSimple from '@/assets/images/chart/line.png';
import dountSimple from '@/assets/images/chart/dount.png';
import numberSimple from '@/assets/images/chart/number.png';
import dashboardSimple from '@/assets/images/chart/dashboard.png';

export default function CreateMonitorComponentModal({
  open,
  cancelFn,
  okFn,
  URL,
  changeURL,
  loading,
}) {

  const [componentType, setComponentType] = useState('line');

  const handleSelectType = (type) => {
    setComponentType(type);
  };
  const componentTypeList = [
    {
      title: '线形图',
      type: 'line',
      description: '指标变化趋势',
      img: lineSimple,
    },
    {
      title: '堆叠面积图',
      type: 'area',
      description: '指标总值变化趋势',
      img: areaSimple,
    },
    {
      title: '数字',
      type: 'number',
      description: '指标最新值',
      img: numberSimple,
    },
    {
      title: '仪表盘',
      type: 'dashboard',
      description: '范围内指标最新值',
      img: dashboardSimple,
    },
    {
      title: '环图',
      type: 'dount',
      description: '数据比例或百分比',
      img: dountSimple,
    },
    {
      title: '柱状图',
      type: 'bar',
      description: '数据的类别比较',
      img: barSimple,
    }
  ];
  const renderComponent = (data) => (
    <div className='chart_card' onClick={() => handleSelectType(data.type)} style={componentType === data.type ? { borderColor: '#346AC4' } : {}}>
      <div className='label_grp'>
        <Radio checked={componentType === data.type}>{data.title}</Radio>
        <p className='description'>{data.description}</p>
      </div>
      <img src={data.img} />
    </div>
  );

  const handleOkFn = (type) => {
    okFn(type);
  };
  return <Modal
    getContainer={false}
    className='monitor_component_modal'
    title="新建监控组件"
    open={open}
    onOk={okFn}
    onCancel={cancelFn}
    footer={[
      <Fragment>
        <Button className='cancel_btn normal_btn' onClick={cancelFn}>取消</Button>
        <Button className='monitor_primary_btn normal_btn' onClick={() => handleOkFn(componentType)} loading={loading}>下一步</Button>
      </Fragment>,
    ]}
  >
    <div className='monitor_component_list'>
      <div className='source_type'>
        <p className='samll_title'>数据来源类型</p>
        <Radio checked={true}>prometheus</Radio>
        <Input value={URL} onChange={changeURL} style={{ width: '300px' }} placeholder='请输入URL' />
      </div>
      <div className='chart_component'>
        <p className='samll_title'>选择组件类型</p>
        <div className='chart_list'>
          {componentTypeList.map(item => renderComponent(item))}
        </div>
      </div>
    </div>
  </Modal>
}